<template>
  <view style="background-color:  rgba(255, 255, 255, 0.6); min-height: 100vh">
    <u-notify ref="uNotify"></u-notify>
    <view :class="{hidden: show}"></view>
    <image
        src='https://mmbiz.qpic.cn/mmbiz_jpg/8iaIEbCVSqJbPf0F2swURHf3icxEk5IiboDJd9rYicLDsDicuWz9O3QTdyepXmia4uvzb967XpHlXOIpBWCuDSuV421w/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1'
        class="bg-set"></image>
    <view class="flex justify-between flex-wrap padding" style="width: 100%;">
      <view v-for="(item,index) in input"
            style="width: 150rpx; height: 150rpx;box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;"
            class="margin-tb radius"
            :style="{backgroundColor: item.bgColor, color: item.fontColor}"
      >
        <view style="width: 100%; height: 100%;">
          <input type="number" v-model="number[index]" style="width: 100%; height: 100%;text-align: center;"
                 @blur="calc(index)" @focus="resetFocus(index)" @input="autoFocus(index)" :focus="item.focus"></input>
        </view>
        <view class="text-center text-sm margin-tb-xs text-white">
          第{{ index + 1 }}局
        </view>
      </view>
      <view style="position: relative;width: 70%;">
        <view style="position: absolute;width:150px;top: 50%;left: 50%;transform: translate(-50%, -50%);">
          <view class="margin-top">
            <button class="cu-btn lg light" style="background-color: rgba(250,219,217,0.8);color: #e54d42; width: 300rpx;"
                    @click="reset">重置
            </button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        show: false,
        number: [],
        input: [{
          bgColor: "rgba(250,219,217,0.8)",
          fontColor: "#e54d42",
          focus: false
        }, {
          bgColor: "rgba(253,230,210,0.8)",
          fontColor: "#f37b1d",
          focus: false
        }, {
          bgColor: "rgba(254,242,206,0.8)",
          fontColor: "#fbbd08",
          focus: false
        }, {
          bgColor: "rgba(215,240,219,0.8)",
          fontColor: "#39b54a",
          focus: false
        }, {
          bgColor: "rgba(210,241,240,0.8)",
          fontColor: "#1cbbb4",
          focus: false
        }, {
          bgColor: "rgba(204,230,255,0.8)",
          fontColor: "#0081ff",
          focus: false
        }, {
          bgColor: "rgba(225,215,240,0.8)",
          fontColor: "#6739b6",
          focus: false
        }, {
          bgColor: "rgba(249,215,234,0.8)",
          fontColor: "#e03997",
          focus: false
        }, {
          bgColor: "rgba(237,225,217,0.8)",
          fontColor: "#a5673f",
          focus: false
        }, {
          bgColor: "rgba(250,219,217,0.8)",
          fontColor: "#e54d42",
          focus: false
        }, {
          bgColor: "rgba(253,230,210,0.8)",
          fontColor: "#f37b1d",
          focus: false
        }, {
          bgColor: "rgba(254,242,206,0.8)",
          fontColor: "#fbbd08",
          focus: false
        }, {
          bgColor: "rgba(215,240,219,0.8)",
          fontColor: "#39b54a",
          focus: false
        }, {
          bgColor: "rgba(210,241,240,0.8)",
          fontColor: "#1cbbb4",
          focus: false
        }, {
          bgColor: "rgba(204,230,255,0.8)",
          fontColor: "#0081ff",
          focus: false
        }, {
          bgColor: "rgba(225,215,240,0.8)",
          fontColor: "#6739b6",
          focus: false
        }, {
          bgColor: "rgba(249,215,234,0.8)",
          fontColor: "#e03997",
          focus: false
        }, {
          bgColor: "rgba(237,225,217,0.8)",
          fontColor: "#a5673f",
          focus: false
        }, {
          bgColor: "rgba(250,219,217,0.8)",
          fontColor: "#e54d42",
          focus: false
        }, {
          bgColor: "rgba(253,230,210,0.8)",
          fontColor: "#f37b1d",
          focus: false
        }, {
          bgColor: "rgba(254,242,206,0.8)",
          fontColor: "#fbbd08",
          focus: false
        }],
        sum: [],
        total: 0
      }
    },
    onLoad() {
      for (let i = 0; i < 21; i++) {
        this.number[i] = ""
      }
      this.adOption = {
        adUnitId: 'adunit-39312a4d64af0e32'
      };
      // 创建广告实例
      this.createInterstitialAd();
    },
    methods: {
      autoFocus(index) {
        if (index < this.input.length - 1)
          this.input[index + 1].focus = true
      },
      resetFocus(index) {
        this.input.forEach((item, i) => {
          if (i != index) {
            item.focus = false
          }
        })
      },
      // 赢1把: 50金币; 赢2把: 90金币;赢3把: 140金币;赢4把: 200金币;
      // 赢5把: 270金币;赢6把:350金币;赢7把:440金币;赢8把:540金币;
      // 第一局免费, 第二局入场费50金, 第三局-第六局入场费100金, 第七局到第十一局入场费200金, 第十二把到第二十一把入场费300金
      totalMoney(item) {
        if (item == 0) {
          return 20
        } else if (item == 1) {
          return 50
        } else if (item == 2) {
          return 90
        } else if (item == 3) {
          return 140
        } else if (item == 4) {
          return 200
        } else if (item == 5) {
          return 270
        } else if (item == 6) {
          return 350
        } else if (item == 7) {
          return 440
        } else if (item == 8) {
          return 540
        }
      },
      calc(item) {
        if (this.number[item] === "") {
          return
        }
        if (this.number[item] > 8 || this.number[item] < 0) {
          uni.showModal({
            title: "提示",
            content: "兄弟, 你当我没玩过金币赛吗?",
            showCancel: false,
            success: (res) => {
              this.number.splice(item, 1, "")
            }
          })
          return
        }
        if (item == 0) {
          this.sum[item] = this.totalMoney(this.number[item])
        } else if (item == 1) {
          this.sum[item] = this.totalMoney(this.number[item]) - 50
        } else if (item >= 2 && item <= 5) {
          this.sum[item] = this.totalMoney(this.number[item]) - 100
        } else if (item >= 2 && item <= 10) {
          this.sum[item] = this.totalMoney(this.number[item]) - 200
        } else if (item >= 2 && item <= 20) {
          this.sum[item] = this.totalMoney(this.number[item]) - 300
        }
        this.total = 0
        this.sum.forEach(item => {
          this.total += item
        })
        this.$refs.uNotify.show({
          top: 0,
          type: 'warning',
          color: '#ffffff',
          bgColor: 'rgba(224,57,151,0.5)',
          message: this.total >= 0 ? `小伙子可以啊, 怒赚${this.total}金币` : `小伙子真惨, 血亏${Math.abs(this.total)}金币`,
          duration: 0,
          fontSize: 30,
          safeAreaInsetTop: false
        })
        this.show = true
      },
      reset() {
        this.number = []
        for (let i = 0; i < 21; i++) {
          this.number[i] = ""
        }
        this.sum = []
        this.total = 0
        this.show = false
        this.$refs.uNotify.close()
      },
      createInterstitialAd() {
        let interstitialAd = this.interstitialAd = uni.createInterstitialAd(this.adOption);
        interstitialAd.onLoad(() => {
          this.showInterstitialAd()
        });
      },
      showInterstitialAd() {
        this.interstitialAd.show().then(() => {
        });
      }
    },
  }
</script>

<style scoped>
  .hidden {
    width: 100%;
    height: 32rpx;
  }
  .bg-set {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
  }
</style>
